---
title: Napit
image: /images/user-guide/views/filter.png
---

<Frame>
  <img src="/images/user-guide/views/filter.png" alt="Header" />
</Frame>

A list of buttons and button groups used throughout the app.

## Nappi

<Tabs>

<Tab title="Usage">

```jsx
import { Button } from "@/ui/input/button/components/Button";

export const MyComponent = () => {
  return (
    <Button
      className
      Icon={null}
      title="Title"
      fullWidth={false}
      variant="primary"
      size="medium"
      position="standalone"
      accent="default"
      soon={false}
      disabled={false}
      focus={true}
      onClick={() => console.log("click")}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Ominaisuudet  | Tyyppi                | Kuvaus                                                                                                                         |
| ------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| className     | merkkijono            | Valinnainen luokan nimi lisämuotoilua varten                                                                                   |
| Kuvake        | `React.ComponentType` | Valinnainen kuvakekomponentti, joka näkyy painikkeessa                                                                         |
| otsikko       | string                | Painikkeen tekstisisältö                                                                                                       |
| kokoLeveys    | looginen              | Määrittää, venyykö painike koko säiliönsä leveydelle                                                                           |
| variantti     | merkkijono            | Painikkeen visuaalinen tyyli. Vaihtoehdot: `primary`, `secondary` ja `tertiary`                |
| koko          | merkkijono            | Painikkeen koko. Kaksi vaihtoehtoa: `pieni` ja `keskikokoinen`                                 |
| asema         | string                | Napin sijainti suhteessa sisaruksiinsa. Vaihtoehdot: `standalone`, `left`, `right` ja `middle` |
| korostus      | merkkijono            | Painikkeen korostusväri. Options include: `default`, `blue`, and `danger`                      |
| pian          | looginen              | Ilmaisee, onko painike merkitty "tulossa pian" (esim. tulevia ominaisuuksia varten)         |
| pois käytöstä | looginen              | Määrittää, onko nappi pois käytöstä                                                                                            |
| keskittyminen | boolean               | Määrittää, onko napilla fokus                                                                                                  |
| onClick       | toiminto              | Takaisinkutsu, joka aktivoituu, kun käyttäjä klikkaa painiketta                                                                |

</Tab>

</Tabs>

## Nappiryhmä

<Tabs>
<Tab title="Usage">
```jsx
import { Button } from "@/ui/input/button/components/Button";
import { ButtonGroup } from "@/ui/input/button/components/ButtonGroup";

export const MyComponent = () => {
return ( <ButtonGroup variant="primary" size="large" accent="blue" className>
<Button
className
Icon={null}
title="Button 1"
fullWidth={false}
variant="primary"
size="medium"
position="standalone"
accent="blue"
soon={false}
disabled={false}
focus={false}
onClick={() => console.log("click")}
/>
<Button
className
Icon={null}
title="Button 2"
fullWidth={false}
variant="secondary"
size="medium"
position="left"
accent="blue"
soon={false}
disabled={false}
focus={false}
onClick={() => console.log("click")}
/>
<Button
className
Icon={null}
title="Button 3"
fullWidth={false}
variant="tertiary"
size="medium"
position="right"
accent="blue"
soon={false}
disabled={false}
focus={false}
onClick={() => console.log("click")}
/> </ButtonGroup>
);
};

````
</Tab>

<Tab title="Props">


| Props | Type | Description |
|-------|------|-------------|
| variant | string | The visual style variant of the buttons within the group. Options include `primary`, `secondary`, and `tertiary` |
| size | string | The size of the buttons within the group. Has two options: `medium` and `small` |
| accent | string | The accent color of the buttons within the group. Options include `default`, `blue` and `danger` |
| className | string | Optional class name for additional styling |
| children | ReactNode | An array of React elements representing the individual buttons within the group |



</Tab>
</Tabs>


## Floating Button

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingButton
      className
      Icon={IconSearch}
      title="Title"
      size="medium"
      position="standalone"
      applyShadow={true}
      applyBlur={true}
      disabled={false}
      focus={true}
    />
  );
};
````

</Tab>

<Tab title="Props">

| Rekvisiitat   | Tyyppi                | Kuvaus                                                                                                                       |
| ------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| className     | merkkijono            | Valinnainen nimi lisätyyliksi                                                                                                |
| Kuvake        | `React.ComponentType` | Valinnainen kuvakekomponentti, joka näkyy painikkeessa                                                                       |
| otsikko       | string                | Painikkeen tekstisisältö                                                                                                     |
| koko          | merkkijono            | Painikkeen koko. Kaksi vaihtoehtoa: `pieni` ja `keskikokoinen`                               |
| asema         | merkkijono            | Napin sijainti suhteessa sisaruksiinsa. Vaihtoehdot: `standalone`, `left`, `middle`, `right` |
| applyShadow   | looginen              | Määrittää, käytetäänkö napin varjostusta                                                                                     |
| applyBlur     | boolean               | Määrittää, käytetäänkö napin sumentamista                                                                                    |
| pois käytöstä | looginen              | Määrittää, onko painike poissa käytöstä                                                                                      |
| keskittyminen | looginen              | Ilmaisee, onko painike keskipisteenä                                                                                         |

</Tab>
</Tabs>

## Kelluva nappiryhmä

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
import { FloatingButtonGroup } from "@/ui/input/button/components/FloatingButtonGroup";
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingButtonGroup size="small">
      <FloatingButton
        className
        Icon={IconClipboardText}
        title
        size="small"
        position="standalone"
        applyShadow={true}
        applyBlur={true}
        disabled={false}
        focus={true}
      />
      <FloatingButton
        className
        Icon={IconCheckbox}
        title
        size="small"
        position="standalone"
        applyShadow={true}
        applyBlur={true}
        disabled={false}
      />
    </FloatingButtonGroup>
  );
};
```

</Tab>

<Tab title="Props">

| Ominaisuudet | Tyyppi     | Kuvaus                                                                                         | Oletus |
| ------------ | ---------- | ---------------------------------------------------------------------------------------------- | ------ |
| koko         | merkkijono | Painikkeen koko. Kaksi vaihtoehtoa: `pieni` ja `keskikokoinen` | pieni  |
| children     | ReactNode  | React-elementtien joukko, joka edustaa yksittäisiä nappeja ryhmässä                            |        |

</Tab>

</Tabs>

## Kelluva kuvakenappi

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingIconButton } from "@/ui/input/button/components/FloatingIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingIconButton
      className
      Icon={IconSearch}
      size="small"
      position="standalone"
      applyShadow={true}
      applyBlur={true}
      disabled={false}
      focus={false}
      onClick={() => console.log("click")}
      isActive={true}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Ominaisuudet  | Tyyppi                | Kuvaus                                                                                                                         |
| ------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| luokanNimi    | merkkijono            | Valinnainen nimi lisätyyliksi                                                                                                  |
| Kuvake        | `React.ComponentType` | Valinnainen kuvakekomponentti, joka näkyy painikkeessa                                                                         |
| koko          | merkkijono            | Painikkeen koko. Kaksi vaihtoehtoa: `pieni` ja `keskikokoinen`                                 |
| asema         | string                | Napin sijainti suhteessa sisaruksiinsa. Vaihtoehdot: `standalone`, `left`, `right` ja `middle` |
| applyShadow   | boolean               | Määrittää, käytetäänkö napin varjostusta                                                                                       |
| applyBlur     | looginen              | Määrittää, käytetäänkö napin sumentamista                                                                                      |
| pois käytöstä | looginen              | Määrittää, onko painike poissa käytöstä                                                                                        |
| keskittyminen | boolean               | Ilmaisee, onko painike keskipisteenä                                                                                           |
| onClick       | toiminto              | Takaisinkutsu, joka aktivoituu, kun käyttäjä klikkaa painiketta                                                                |
| aktiivinen    | looginen              | Määrittää, onko painike aktiivisena                                                                                            |

</Tab>

</Tabs>

## Kelluva kuvakenappiryhmä

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingIconButtonGroup } from "@/ui/input/button/components/FloatingIconButtonGroup";
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  const iconButtons = [
    {
      Icon: IconClipboardText,
      onClick: () => console.log("Button 1 clicked"),
      isActive: true,
    },
    {
      Icon: IconCheckbox,
      onClick: () => console.log("Button 2 clicked"),
      isActive: true,
    },
  ];

  return (
    <FloatingIconButtonGroup
    className
    size="small"
    iconButtons={iconButtons} />
  );
};

```

</Tab>

<Tab title="Props">

| Rekvisiitat | Tyyppi   | Kuvaus                                                                                                                                                                                                                                                                                               |
| ----------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| luokanNimi  | string   | Valinnainen nimi lisätyyliksi                                                                                                                                                                                                                                                                        |
| koko        | string   | Painikkeen koko. Kaksi vaihtoehtoa: `pieni` ja `keskikokoinen`                                                                                                                                                                                                       |
| kuvakeNapit | taulukko | An array of objects, each representing an icon button in the group. Each object should include the icon component you want to display in the button, the function you want to call when a user clicks on the button, and whether the button should be active or not. |

</Tab>

</Tabs>

## Kevyt nappi

<Tabs>
<Tab title="Usage">

```jsx
import { LightButton } from "@/ui/input/button/components/LightButton";

export const MyComponent = () => {
  return <LightButton
  className
  icon={null}
  title="Title"
  accent="secondary"
  active={false}
  disabled={false}
  focus={true}
  onClick={()=>console.log('click')}
  />;
};
```

</Tab>

<Tab title="Props">

| Rekvisiitat   | Tyyppi            | Kuvaus                                                                                               |
| ------------- | ----------------- | ---------------------------------------------------------------------------------------------------- |
| luokanNimi    | merkkijono        | Valinnainen nimi lisätyyliksi                                                                        |
| kuvake        | `React.ReactNode` | Kuvake, jonka haluat näyttää napissa                                                                 |
| otsikko       | string            | Painikkeen tekstisisältö                                                                             |
| korostus      | merkkijono        | Painikkeen korostusväri. Options include: `secondary` and `tertiary` |
| aktiivinen    | looginen          | Määrittää, onko painike aktiivisena                                                                  |
| pois käytöstä | looginen          | Määrittää, onko painike poissa käytöstä                                                              |
| keskittyminen | looginen          | Ilmaisee, onko painike keskipisteenä                                                                 |
| onClick       | toiminto          | Takaisinkutsu, joka aktivoituu, kun käyttäjä klikkaa painiketta                                      |

</Tab>

</Tabs>

## Kevyt kuvakepainike

<Tabs>
<Tab title="Usage">

```jsx
import { LightIconButton } from "@/ui/input/button/components/LightIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <LightIconButton
      className
      testId="test1"
      Icon={IconSearch}
      title="Title"
      size="small"
      accent="secondary"
      active={true}
      disabled={false}
      focus={true}
      onClick={() => console.log("click")}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Ominaisuudet  | Tyyppi                | Kuvaus                                                                                               |
| ------------- | --------------------- | ---------------------------------------------------------------------------------------------------- |
| className     | merkkijono            | Valinnainen nimi lisätyyliksi                                                                        |
| testiId       | string                | Painikkeen testitunniste                                                                             |
| Kuvake        | `React.ComponentType` | Valinnainen kuvakekomponentti, joka näkyy painikkeessa                                               |
| otsikko       | string                | Painikkeen tekstisisältö                                                                             |
| koko          | merkkijono            | Painikkeen koko. Kaksi vaihtoehtoa: `pieni` ja `keskikokoinen`       |
| korostus      | string                | Painikkeen korostusväri. Options include: `secondary` and `tertiary` |
| aktiivinen    | boolean               | Määrittää, onko painike aktiivisena                                                                  |
| pois käytöstä | boolean               | Määrittää, onko painike poissa käytöstä                                                              |
| keskittyminen | boolean               | Ilmaisee, onko painike keskipisteenä                                                                 |
| onClick       | funktio               | Takaisinkutsu, joka aktivoituu, kun käyttäjä klikkaa painiketta                                      |

</Tab>

</Tabs>

## Pääpainike

<Tabs>
<Tab title="Usage">

```jsx
import { MainButton } from "@/ui/input/button/components/MainButton";
import { IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <MainButton
      title="Checkbox"
      fullWidth={false}
      variant="primary"
      soon={false}
      Icon={IconCheckbox}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Ominaisuudet         | Tyyppi                           | Kuvaus                                                                                                                 |
| -------------------- | -------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| otsikko              | string                           | Painikkeen tekstisisältö                                                                                               |
| kokoLeveys           | boolean                          | Määrittää, venyykö painike koko säiliönsä leveydelle                                                                   |
| variantti            | merkkijono                       | Painikkeen visuaalinen tyyli. Options include `primary` and `secondary`                                |
| pian                 | looginen                         | Ilmaisee, onko painike merkitty "tulossa pian" (esim. tulevia ominaisuuksia varten) |
| Kuvake               | `React.ComponentType`            | Valinnainen kuvakekomponentti, joka näkyy painikkeessa                                                                 |
| React `button` props | `React.ComponentProps<'button'>` | Kaikki standardit HTML-painikkeen ominaisuudet ovat tuettuja                                                           |

</Tab>

</Tabs>

## Pyöristetyllä kuvakkeella varustettu painike

<Tabs>
<Tab title="Usage">

```jsx
import { RoundedIconButton } from "@/ui/input/button/components/RoundedIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <RoundedIconButton
      Icon={IconSearch}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Ominaisuudet         | Tyyppi                                          | Kuvaus |
| -------------------- | ----------------------------------------------- | ------ |
| Kuvake               | `React.ComponentType`                           |        |
| React `button` props | `React.ButtonHTMLAttributes<HTMLButtonElement>` |        |

</Tab>

</Tabs>
